<template>
  <div class="h-100">
    <!-- 例行测试列表 -->
    <routine-list
      v-show="!showEdit"
      ref="routineList"
      @operate="operate"
    />
    <!-- 通道选择 -->
    <channel-port-selector
      ref="channelPortSelector"
      :show-select="showEdit"
      :operate-type="operateType"
      :form-data="formData"
      page-name="routine"
      @next="next"
      @goBack="goBack"
    />
    <step-tow
      :form-data="formData"
      :operate-type="operateType"
      :visible="showNext"
      @close="close"
    />
    <el-dialog
      :title="$t('PLEASE_SELECT_LINK')"
      :visible.sync="showRoute"
      width="80%"
    >
      <!-- 路由列表 -->
      <link-segment-list
        ref="linkSegmentList"
        style="height: 400px"
        page-name="routine"
        @operate="routeOperate"
        @reloadAll="reloadAll"
      />
      <template v-slot:footer>
        <el-button @click="showRoute = false">{{ $t('CANCEL') }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import linkTestPlan from '@/api/oen/LinkTestPlan'
  import StepTow from './components/StepTow'
  import LinkSegmentList from '@/components/LinkSegmentList'
  import RoutineList from './components/RoutineList'
  import ChannelPortSelector from '../detect/components/ChannelPortSelector'

  export default {
    components: { StepTow, RoutineList, ChannelPortSelector, LinkSegmentList },
    data() {
      return {
        showRoute: false,
        showEdit: false,
        showNext: false,
        allRoutes: [],
        segmentList: null,
        formData: {
          startNodeId: '',
          endNodeId: '',
          stepList: [],
          physicStruct: []
        },
        operateType: 'add',
        routeData: {}
      }
    },
    computed: {
      ...mapGetters(['dictList'])
    },
    activated() {
      this.loadData()
      this.reloadAll()
    },
    deactivated() {
      this.showRoute = false
      this.showEdit = false
      this.showNext = false
    },
    methods: {
      loadData() {
        this.$refs.routineList && this.$refs.routineList.loadData()
      },
      reloadAll(searchData) {
        this.$refs.channelPortSelector && this.$refs.channelPortSelector.loadData(searchData)
      },
      // 路由列表操作
      routeOperate(data) {
        this.showRoute = false
        this.routeData = data.data
        this.$refs.channelPortSelector && this.$refs.channelPortSelector.routeChange(data.data.segmentId)
        this.showEdit = true
      },
      // 例行测试列表操作
      operate(data) {
        this.operateType = data.operateType
        if (data.operateType === 'add') {
          this.formData = this.$options.data().formData
          this.showRoute = true
          this.$nextTick(() => {
            this.$refs.linkSegmentList.loadData()
          })
        } else {
          linkTestPlan.queryOne({ planId: data.rowData.planId }).then(res => {
            this.showEdit = true
            this.formData = res
            this.$nextTick(() => {
              this.$refs.channelPortSelector &&
                this.$refs.channelPortSelector.routeChange(res.linkSegmentId)
            })
          })
        }
      },
      //   下一步
      next(data) {
        this.formData.physicStruct = data
        this.showNext = true
      },
      goBack() {
        this.showEdit = false
        this.$refs.routineList.doLayout()
      },
      close(data) {
        this.showNext = false
        if (data === true) {
          this.showEdit = false
          this.loadData()
        }
      }
    }
  }
</script>

<style scoped lang="scss"></style>
